import { useState, useEffect } from "react";
import OrderChart from "../../component/order/OrderChart";
import OrderStatistics from "../../component/order/OrderStatistics";
import { Skeleton, Card, Row, Col } from "antd";


export const OrderAnalyse = () => {
  const [isShowSkeleton, setIsShowSkeleton] = useState(true);

  // 用 useEffect 管理骨架屏显隐，避免组件渲染时重复创建定时器
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShowSkeleton(false);
    }, 2000);

    return () => clearTimeout(timer); // 组件卸载时清理定时器
  }, []);

  return (
    <div>
      
      {isShowSkeleton ? (
        <Skeleton
          paragraph={{ rows: 6 }}
          active
          
        />
      ) : (
        <Row gutter={16}>
          <Col span={12}>
            <Card
              title="订单统计概览"
              bordered={true}
              style={{ height: "100%", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)" }}
            >
              <OrderStatistics />
            </Card>
          </Col>
          <Col span={12}>
            <Card
              title="订单趋势图表"
              bordered={true}
              style={{ height: "100%", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)" }}
            >
              <OrderChart />
            </Card>
          </Col>
          {/* 可根据需要继续添加更多卡片，如下方示例的“订单类型分布” */}
          <Col span={24} style={{ marginTop: "16px" }}>
            <Card
              title="订单类型分布"
              bordered={true}
              style={{ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)" }}
            >
              {/* 这里可接入订单类型分布的组件，如饼图等 */}
              <div style={{ height: 300, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <p>订单类型分布图表区域</p>
              </div>
            </Card>
          </Col>
        </Row>
      )}
    </div>
  );
};